<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/cookie.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .wrap{
            width: 600px;
            margin: 0 auto;

            .book {
                width: 100%;
                height: 500px;
            }
        }

        
    </style>
</head>

<body>
    <div class="wrap">
        <div class="toolBar">
            <p> 
                <!-- h5新增表单类型  type="range" 滑动条
                    min 最小值
                    max 最大值
                    step 跨度 1


                -->
                <input class="font" type="range" min="12" max="32" step="1" value="16">
                <span class="fontTips">16</span>
            </p>
            <p>
                <!-- h5新增表单类型  type="color"  拾色器  -->
                <input type="color" class="color" >
            </p>
            <p>
                <select class="line">
                    <option value="1">1倍</option>
                    <option value="1.5">1.5倍</option>
                    <option value="2">2倍</option>
                    <option value="3">3倍</option>
                </select>
            </p>
        </div>
        <div class="book">
            要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA
            发布
            262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。

            该标准从一开始就是针对 JavaScript 语言制定的，但是之所以不叫 JavaScript，有两个原因。一是商标，Java 是 Sun 公司的商标，根据授权协议，只有 Netscape 公司可以合法地使用
            JavaScript 这个名字，且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保证这门语言的开放性和中立性。

            因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 JScript 和
            ActionScript）。日常场合，这两个词是可以互换的。
        </div>
    </div>
</body>
<script>
    var fontInp = document.querySelector(".font");
    var fontTips = document.querySelector(".fontTips");
    var colorInp = document.querySelector(".color");
    var lineSel = document.querySelector(".line");
    var book = document.querySelector(".book");

    // 变量和cookie的区别
    // (1) 每次刷新页面,变量中存储的数据就会被重置为初始数据
    // (2) 变量存储数据时无法设置过期时间,没有办法跨页面访问

    var fontSize = 16;
    var color = "#000";
    var lineHeight = 1;

    fontInp.onchange = function(){
        fontSize = this.value;
        console.log(fontSize);

        fontTips.textContent = fontSize;
        book.style.fontSize = fontSize + "px";
    }
    
    colorInp.onchange = function(){
        color = this.value;
        book.style.color = color ;
    }

    lineSel.onchange = function(){
        lineHeight = this.value;
        // book.style.lineHeight = lineHeight * fontSize + "px";
        book.style.lineHeight = lineHeight ;
    }


</script>

</html>